
<style>
    /* 这段样式只是用于演示 */
    #LAY-component-timeline .layui-card-body{padding: 15px;}
</style>

<div class="layui-fluid" id="LAY-component-timeline">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据同步</div>
                <div class="layui-card-body">
                    <ul class="layui-timeline show-message"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,router = layui.router();

        const ws = window.ws;

        ws.onopen = function () {

            msg("正在链接中...");
        }

        ws.onmessage = function (evt) {
            let data = JSON.parse(evt.data);
            console.log(data);
            switch (data.event){
                case 'open':
                    msg('打开链接通道id：'+data.data.fd);

                    ws.send(JSON.stringify({
                        event:'dealer_sync',
                        data:{id:data.id}
                    }));
                    break
                case 'message':
                    msg(data.data.content);
                    break
            }

        }

        ws.onerror = function (evt, e) {
            msg("错误信息为" + e);
        }

        ws.onclose = function () {
            msg("连接已关闭");
        }

        function msg(msg){

            let html = '<li class="layui-timeline-item">\n' +
                '<i class="layui-icon layui-timeline-axis"></i>\n' +
                '    <div class="layui-timeline-content layui-text">\n' +
                '        <div class="layui-timeline-title">'+msg+'</div>\n' +
                '    </div>\n' +
                '</li>'

            $('.show-message').append(html);
        }
    });
</script>